<template>
  <view :class="[variables.ns.b, variables.ns.s('disabled', disabled), variables.ns.s('active', state.active)]"
    @click="provideContext?.change(props)">
    <slot>{{ label ?? value }}</slot>
  </view>
</template>

<script lang="ts" setup>
import { inject, reactive, watch } from 'vue'
import { variables as parentVariables } from '..'
import { TabItemNS, variables } from '.'

defineOptions({
  name: TabItemNS.name
})
const props = defineProps(TabItemNS.props)
const provideContext = inject<parentVariables.ProvideContext>(parentVariables.provideName)
const state = reactive({
  active: false
})

watch(
  () => provideContext?.props.modelValue,
  () => state.active = provideContext?.isActive(props)!,
  { immediate: true }
)
</script>